import React, { startTransition, useEffect, useState } from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import '../css/collection.css'
import axios from 'axios'

export default function Collection() {
  const navigate = useNavigate()
  const [goods, setgoods] = useState([])

  const back = () => {
    startTransition(() => {
      navigate('/bttm/my')
    })
  }
  const right = (
    <div style={{ fontSize: 24 }}>
      <span style={{ color: '#c1ab96', fontSize: '1.5rem' }} onClick={() => {
        
      }}>编辑</span>
    </div>
  )
  const getgomodel = () => {
    axios.get('/cxb/getgomodel').then(res => {
      if (res.data.code === 200) {
        setgoods(res.data.data)
      }
    })
  }
  useEffect(() => {
    getgomodel()
  }, [])
  return (
    <div>
      <div className='cxb_collection_navbar'>
        <NavBar right={right} onBack={back}>收藏夹</NavBar>
      </div>
      <div className='cxb_collection_content'>
        {
          goods.filter(i=>i.sc.includes(JSON.parse(sessionStorage.getItem('users'))._id)).map(i=>{
            return <div key={i._id} className='cxb_collection_content_item'>
              <img src={i.img[0]} alt="" />
              <div className='cxb_collection_content_item_right'>
                <p>{i.name}</p>
                <span>{i.sc.length}人已经收藏</span>
                <div style={{display:'flex',justifyContent:'space-between'}}>
                  <span>￥{i.price}</span>
                  <button style={{background:'#fff',border:'1px solid #c1ab96',color:'#c1ab96',fontSize:'1rem',padding:'0.5rem 1rem',borderRadius:'1rem'}}>找相似</button>
                </div>
              </div>
            </div>
          })
        }
      </div>
    </div>
  )
}
